<script setup>
import icon1 from '../assets/icon1.png';
import icon2 from '../assets/icon2.png';
import icon3 from '../assets/icon3.png';
import icon4 from '../assets/icon4.png';
import { ref } from 'vue'

import{useRouter} from'vue-router';
const router =useRouter()
const items = ref([
    { img: icon1, title: '学校简介' },
    { img: icon2, title: '专业介绍' },
    { img: icon3, title: '预约进校' },
    { img: icon4, title: '图书馆预约' },
])
console.log(items.value);

const btnClick=()=>{
    console.log('btnClick')
    router.push({path:'/WhxdList'})
}
</script>
<template>
<div class="box"><img src="../assets/image.png.png" alt="">
<div class="xiao">
<div class="cc">
    <div class="title"><img src="../assets/路径 1.png" alt=""><span>我的大学</span></div>
                <div class="nav">
                    <div class="item" v-for="item in items">
                        <img :src="item.img" alt="">
                        <span>{{ item.title }}</span>
                    </div>
                </div>
                <div class="xyfc">
                    <div>校园风采</div>
                    <div>查看更多<img src="../assets/123.png" alt=""></div>
                </div>
                <div class="xyfc-img">
                      <div>
                        <img src="../assets/f0d4624d7bd7d62701365daca2a514d.jpg@1x.png" alt="">
                      </div>
                      <div>
                        <img src="../assets/1ca49fbf03fa8c69a8a446af526ceaa.jpg.png" alt="">
                        <img src="../assets/87f9fbbbb0714a032a8aa88cb9e319b.jpg.png" alt="">
                      </div>
                </div>
                <div class="xyfc-zyfw">
                  <div>专业服务</div>
                  <div class="xyfc-zyfw-content">
                    <div>
                    <img src="../assets/01.png" alt="">
                        <p>技能提升</p>
                    </div>
                  
                  <div>
                    <img src="../assets/02.png" alt="">
                        <p>学历提升</p>
                  </div>
                  <div>
                    <img src="../assets/03.png" alt="">
                        <p>报考指南</p>
                  </div>
                </div>
                </div>
            </div>
            <div class="wdc">
                <div class="tou">
                <img src="../assets/wdc.png" alt="">
                <span>我的城</span>
                </div>
                <div class="xyytf">
                    <div>相约游团风</div>
                    <div>查看更多<img src="../assets/123.png" alt=""></div>
                </div>
                <div class="xyytf-content">
                    <div class="xyytf-content-left">
                        <img src="../assets/矩形 6.png" alt="">
                    </div>
                    <div class="xyytf-content-right">
                        <div class="title">龙山源果木专业合作社</div>
                        <div class="tag">
                            <span>绿色天然</span>
                            <span>水果采摘</span>
                            <span>有机</span>
                            <span>生态</span>
                        </div>
                        <div class="time">
                            <img src="../assets/时间.png" alt="">
                            <span>08:00-17:00</span>
                        </div>
                        <div class="address">
                            <img src="../assets/指缘地点6.png" alt="">
                            <span>团风县回龙山镇沙畈村、罗家咀村</span>
                        </div>
                        <div>
                         <div class="btn">
                            <button>了解详情</button>
                         </div>
                        </div>
                    </div>
                   </div>
                    <div class="xyytf-content2">
                    <div class="xyytf-content2-left">
                        <img src="../assets/矩形 6 (1).png" alt="">
                    </div>
                    <div class="xyytf-content2-right">
                        <div class="title2">童宝草莓采摘园</div>
                        <div class="tag2">
                            <span>红颜奶油</span>
                            <span>亲子采摘</span>
                        </div>
                        <div class="time2">
                            <img src="../assets/时间.png" alt="">
                            <span>09:00-17:30</span>
                        </div>
                        <div class="address2">
                            <img src="../assets/指缘地点6.png" alt="">
                            <span>黄州区堵城镇</span>
                        </div>
                         <div>
                            <div class="btn2">
                            <button>了解详情</button>
                            </div>
                         </div>
                    </div>
                    </div>
                    <div class="tdss">
                      <div>探店食宿</div>
                      <div>查看更多<img src="../assets/123.png" alt=""></div>
                    </div>
                    <div class="tdss-box">
                        <div class="tdss-item">
                            <img src="../assets/3847304b2f68711098279b14071603a0.png" alt="">
                            <div class="tdss-item-content">
                               <div>团风觅怡酒店</div>
                               <div class="star">
                                  <img src="../assets/5ec68bb25ad70f9973ba480405261b87.png" alt="">
                                  <img src="../assets/5ec68bb25ad70f9973ba480405261b87.png" alt="">
                                  <img src="../assets/5ec68bb25ad70f9973ba480405261b87.png" alt="">
                                  <img src="../assets/5ec68bb25ad70f9973ba480405261b87.png" alt="">
                                  <img src="../assets/5ec68bb25ad70f9973ba480405261b87.png" alt="">
                               </div>
                               <div class="price">
                                <span><span>129-169</span>元/晚</span>
                                <button>订购</button>
                               </div>
                            </div>
                        </div>
                       <div class="tdss-item">
                            <img src="../assets/0ac4a9f05a2014a3d5b78c1fb66aa291.png" alt="">
                            <div class="tdss-item-content">
                               <div>团风茉莉花开酒店</div>
                               <div class="star">
                                  <img src="../assets/5ec68bb25ad70f9973ba480405261b87.png" alt="">
                                  <img src="../assets/5ec68bb25ad70f9973ba480405261b87.png" alt="">
                                  <img src="../assets/5ec68bb25ad70f9973ba480405261b87.png" alt="">
                                  <img src="../assets/5ec68bb25ad70f9973ba480405261b87.png" alt="">
                                  <img src="../assets/5ec68bb25ad70f9973ba480405261b87.png" alt="">
                               </div>
                               <div class="price">
                                <span><span>128-178</span>元/晚</span>
                                <button>订购</button>
                               </div>
                            </div>
                        </div>
                    </div>
                    <div class="sydz">
                      <div>摄影定制</div>
                      <div>查看更多<img src="../assets/123.png" alt=""></div>
                    </div>
                    <div class="sydz1">
                    <div><img src="../assets/2.jpg.png" alt=""></div><span>产品展示</span>
                    <div class="yy"><img src="../assets/分组 3.png" alt=""><div class="jj">节日写真</div>
                        <img src="../assets/毕业写真2.png.png" alt=""><div class="ll">校园写真</div>
                    </div>
                      </div>
                     <div class="sydz" >

                    <div>网红小店</div>
                    <div @click="btnClick">查看更多<img src="../assets/123.png" alt=""></div>
                   </div>
                    <div class="tdss-box">
                     <div class="tdss-item">
                        <img src="../assets/矩形 3.png" alt="">
                        <div class="aa">
                            <div class="bb">黄鼠狼黄焖鸡</div>
                                <span class="zi"> 四川火锅汤底和秘制的营养酱料，口感嫩滑爽口</span>
                            </div>
                    </div>
                    <div class="tdss-item">
                        <img src="../assets/矩形 16.png" alt="">
                        <div class="aa">
                            <div class="bb">鹏记热干面</div>
                                <span class="zi">用料讲究，手法精湛，口味正宗</span>
                            </div>
                    </div>
                    </div>
                    <div class="tdss-box">
                    <div class="tdss-item">
                        <img src="../assets/矩形 18.png" alt="">
                        <div class="aa">
                            <div class="bb">金汤麻辣烫</div>
                                <span class="zi"> 一人一锅一煮的模式，既健康卫生又风味纯正</span>
                            </div>
                    </div>
                    <div class="tdss-item">
                        <img src="../assets/矩形 20.png" alt="">
                        <div class="aa">
                            <div class="bb">春至春归</div>
                                <span class="zi">浓郁的茶香，丝滑的口感，回味无穷</span>
                            </div>
                    </div>
                    </div>
            </div>
        </div>
    </div>
 
</template>
<style scoped>

.xiao{
    padding: 0px 16px;
}
.box>img{
    width: 100%;
    display: block;
}
.xiao>.cc{
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;
}
.box{
    display: block;
    unicode-bidi: isolate;
    background-color: rgba(241, 244, 249, 1);
}
.xiao>.cc>.title>img{
    margin-right: 4px;
}
.xiao>.cc>.title>span{
    font-size: 18xp;
    font-weight: bold ;
    color: #784E23;
}
.xiao>.cc>.nav {
    margin-top: 14px;
    display: flex;
    justify-content: space-evenly;
}
.xiao>.cc>.nav>.item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.xiao>.cc>.nav>.item img {
    width: 56px;
}
.xiao>.cc>.nav>.item span {
    margin-top: 12px;

}
.xiao>.cc>.xyfc{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding: 0 10px;
}
.xiao>.cc>.xyfc:first-child{
    font-size: 14px;
}
.xyfc>div{
    color: #784E23;
}
.xiao>.cc>.xyfc>div:last-child{
    font-size: 12px;
    color: #555555;
}
.xiao .cc .xyfc-img{
    display: flex;
    justify-content: space-between;
    padding: 0 6px;
}
.xiao .cc .xyfc-img>div{
    width: 48.1%;
    height: 128px;
   color: #784E23;
}
.xiao .cc .xyfc-img>div:last-child>img{
    height: 62px;
}
.xiao .cc .xyfc-img>div>img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.xyfc-zyfw-content{
    display: flex;
}
.xyfc-zyfw-content div{
    width: 30%;
    padding: 10px;
}
.xyfc-zyfw-content div img{
  width: 100%;
}
.xyfc-zyfw-content div p{
    text-align: center;
    margin: 0;
}

.xyfc-zyfw>div:first-child{
     font-size: 14px;
     color: #784E23;
    padding: 0 10px;
    margin-top: 20px;
}

.tou>img{
    margin-right: 4px;
}
.tou>span{
    font-size: 18xp;
    font-weight: bold  ;
    color: #784E23;  
}
.wdc{
    margin-top: 8px;
     background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;
}
.xyytf{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 10px;
    background:  linear-gradient(90deg, rgba(243, 252, 242, 0) 0%, rgba(214, 171, 129, 1) 100%);;
}
.xyytf>div{
    color: #784E23;
}
.xyytf img{
    margin-left: 10px;
}
.xyytf-content{
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    border: 0.5px solid rgba(120, 78,35, 1);
    padding: 6px;
    margin-top: 6px;
}
.xyytf-content>.xyytf-content-left{
    width: 40%;
    display: flex;
    align-items: center;
}
.xyytf-content>div.xyytf-content-left img{
    width: 100%;
}
.xyytf-content>.xyytf-content-right{
    width: 60%;
    font-size: 12px;
    padding-left: 6px;
}
.xyytf-content>.xyytf-content-right .title{
    font-size: 16px;
    font-weight: bold;
    color: #000;
}
.xyytf-content>.xyytf-content-right .tag{
    margin: 8px 0;
}
.xyytf-content>.xyytf-content-right .tag span{
    background-color: #fbf8f8;
    margin-left: 4px;
    padding: 2px;
}
.xyytf-content>.xyytf-content-right .tag span:first-child{
    margin-left: 0;
}
.xyytf-content>.xyytf-content-right .time,
.address{
    display: flex;
    align-items: center;
}
.xyytf-content>.xyytf-content-right .btn{
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.xyytf-content>.xyytf-content-right .btn button{
    width: 100px;
    height: 30px;
    border-radius: 20px;
    background: rgba(120, 78,35, 1);
    color: #fff;
}
.xyytf-content2{
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    border: 0.5px solid rgba(120, 78,35, 1);
    padding: 6px;
    margin-top: 6px;
}
.xyytf-content2>.xyytf-content2-left{
    width: 40%;
    display: flex;
    align-items: center;
}
.xyytf-content2>div.xyytf-content2-left img{
    width: 100%;
}
.xyytf-content2>.xyytf-content2-right{
    width: 60%;
    font-size: 12px;
    padding-left: 6px;
}
.xyytf-content2>.xyytf-content2-right .title2{
    font-size: 16px;
    font-weight: bold;
    color: #000;
}
.xyytf-content2>.xyytf-content2-right .tag2{
    margin: 8px 0;
}
.xyytf-content2>.xyytf-content2-right .tag2 span{
    background-color: #fbf8f8;
    margin-left: 4px;
    padding: 2px;
}
.xyytf-content2>.xyytf-content2-right .tag2 span:first-child{
    margin-left: 0;
}
.xyytf-content2>.xyytf-content2-right .time2,
.address2{
    display: flex;
    align-items: center;
}
.xyytf-content2>.xyytf-content2-right .btn2{
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.xyytf-content2>.xyytf-content2-right .btn2 button{
    width: 100px;
    height: 30px;
    border-radius: 20px;
    background: rgba(120, 78,35, 1);
    color: #fff;
}
.tdss{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 10px;
    background:  linear-gradient(90deg, rgba(243, 252, 242, 0) 0%, rgba(214, 171, 129, 1) 100%);;
}
.tdss>div{
    color: #784E23;
}
.tdss img{
    margin-left: 10px;
}
.tdss-box{
    display: flex;
    justify-content: space-between;
    margin: 10px 10px;
}
.tdss-box .tdss-item{
    width: 48%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
}
.tdss-box .tdss-item>img{
    width: 100%;
    height: 130px;
}
.tdss-box .tdss-item .tdss-item-content{
    padding: 0 12px 10px 7px;
}
.tdss-box .tdss-item .tdss-item-content .title{
    font-size: 12px;
}
.tdss-box .tdss-item .tdss-item-content .star>img{
    margin-right: 3px;
    height: 12px;
    height: 12px;
}
.tdss-box .tdss-item .tdss-item-content .price{
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tdss-box .tdss-item .tdss-item-content .price>button{
    border-radius: 20px;
    background: rgba(120, 78, 35, 1);
    color: #fff;
    padding: 0px 8px;
}
.sydz{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 10px;
    background:  linear-gradient(90deg, rgba(243, 252, 242, 0) 0%, rgba(214, 171, 129, 1) 100%);;
}
.sydz>div{
    color: #784E23;
}
.sydz1 {
    display: flex;
    justify-content: space-between;
    padding: 0 6px;
    position: relative;
}
.sydz1>span{
    color: #fff;
    position: absolute;
    left: 15px;
   bottom: 10px;
}
.yy div{
    color: #fff;
}
.yy{
    position: relative;
}
.jj{
   position: absolute;
   left: 10px;
   bottom: 101px;
}
.ll{
    position: absolute;
   left: 10px;
   bottom: 1px;
}
.sydz1>div{
    width: 48.1%;
    height: 200px;
   
    color: #784E23;
}
.sydz1>div:last-child>img{
    height: 98px;
}
.sydz1>div>img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.xyytf-content2>.wdc .xyytf>div:first-child {
    font-size: 14px;
    color: #784E23;
}
.xyytf-content2>.wdc .xyytf>div:last-child {
    font-size: 12px;
    color: #555555;
}
.xyytf-content2>.wdc .xyytf>div:last-child>img {
    margin-left: 10px;
}
.xyytf-content2>.wdc .xyytf-tu {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    border: 0.5px solid rgba(120, 78, 35, 1);
    padding: 6px;
    margin-top: 6px;
}
.xyytf-content2>.wdc .xyytf-tu>.xyytf-zuo {
    width: 40%;
    display: flex;
    align-items: center;
}
.xyytf-content2>.wdc .xyytf-tu>.xyytf-zuo img {
    width: 100%;
}
.xyytf-content2>.wdc .xyytf-tu>.xyytf-you {
    width: 60%;
    font-size: 12px;
    padding-left: 6px;
}
.xyytf-content2>.wdc .xyytf-tu>.xyytf-you .title {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}
.xyytf-content2>.wdc .xyytf-tu>.xyytf-you>.tag {
    margin: 8px 0;
}
.xyytf-content2>.wdc .xyytf-tu>.xyytf-you>.tag span {
    background-color: #f0f0f0;
    margin-left: 4px;
    padding: 2px;
}
.xyytf-content2>.wdc .xyytf-tu>.xyytf-you>.tag span:first-child {
    margin-left: 0;
}
.xyytf-content2>.wdc .xyytf-tu>.xyytf-you .time .dizhi {
    display: flex;
    align-items: center;
}
.xyytf-content2>.wdc .xyytf-tu>.xyytf-you .btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.xyytf-content2>.wdc .xyytf-tu>.xyytf-you .btn button {
    width: 100px;
    height: 30px;
    border-radius: 20px;
    background: rgba(120, 78, 35, 1);
    color: #fff;
}
.xyytf-content2>.wdc .xyytf-tu1 {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    border: 0.5px solid rgba(120, 78, 35, 1);
    padding: 6px;
    margin-top: 6px;
}
.xyytf-content2>.wdc .xyytf-tu1>.xyytf-zuo1 {
    width: 40%;
    display: flex;
    align-items: center;
}
.xyytf-content2>.wdc .xyytf-tu1>.xyytf-zuo1 img {
    width: 100%;
}
.xyytf-content2>.wdc .xyytf-tu1>.xyytf-you1 {
    width: 60%;
    font-size: 12px;
    padding-left: 6px;
}
.xyytf-content2>.wdc .xyytf-tu1>.xyytf-you1 .title {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}
.xyytf-content2>.wdc .xyytf-tu1>.xyytf-you1>.tag1 {
    margin: 8px 0;
}
.xyytf-content2>.wdc .xyytf-tu1>.xyytf-you1>.tag1 span {
    background-color: #f0f0f0;
    margin-left: 4px;
    padding: 2px;
}
.xyytf-content2>.wdc .xyytf-tu1>.xyytf-you1>.tag1 span:first-child {
    margin-left: 0;
}
.xyytf-content2>.wdc .xyytf-tu1>.xyytf-you1 .time1 .dizhi1 {
    display: flex;
    align-items: center;
}
.xyytf-content2>.wdc .xyytf-tu1>.xyytf-you1 .btn1 {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.xyytf-content2>.wdc .xyytf-tu1>.xyytf-you1 .btn1 button {
    width: 100px;
    height: 30px;
    border-radius: 20px;
    background: rgba(120, 78, 35, 1);
    color: #fff;
}
.zi{
    font-size: 12px;
}
.bb{
    font-weight: bold;
}
.tdss-item{
 border: 0.5px solid rgba(120, 78, 35, 1);;   
}
</style>